<template>
  <div class="outer-frame">
    <Header />
    <div class="banxin">
      <div class="frame">
        <div class="frame-left">
          <ul>
            <!-- <li>个人资料</li> -->
            <li @click="toPersonalData">个人资料</li>
            <li @click="toAccountSettings">账号设置</li>
            <li @click="toPrivacySettings">隐私设置</li>
            <li @click="toHonorLevel">荣誉等级</li>
          </ul>

          <div class="free">暂时空闲</div>
        </div>

        <div class="frame-right">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header.vue";

export default {
  name: "WriteData",
  data() {
    return {};
  },
  components: {
    Header,
  },
  methods: {
    //跳转个人中心
    toPersonalData() {
      this.$router.push({
        name: "PersonalData",
      });
    },
    //跳转账号设置
    toAccountSettings() {
      this.$router.push({
        name: "AccountSettings",
      });
    },
    //跳转隐私设置
    toPrivacySettings() {
      this.$router.push({
        name: "PrivacySettings",
      });
    },
    //跳转荣誉等级
    toHonorLevel() {
      this.$router.push({
        name: "HonorLevel",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.outer-frame {
  width: 100%;
  min-height: 100%;
  // background: url("../assets/newbg.png") no-repeat bottom;
  box-sizing: border-box;
  background-color: #fafafa;
}

.frame {
  margin-top: 15px;
  margin-bottom: 10px;
  // background-color: pink;
  width: 100%;
  // height: 100%;
  // overflow: hidden;
  padding: 0px 30px;
}
.frame-left {
  width: 230px;
  height: 100%;
  // background-color: hotpink;
  float: left;
  margin-right: 30px;
}
.frame-right {
  width: 960px;
  // height: 100%;
  // background-color: rgb(94, 9, 51);
  // float: left;
  margin-left: 280px;

  // border: 1px solid black;
}

ul {
  width: 100%;
  // background-color: rgba(135, 206, 235, 0.2);
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px 0px #dbdada;
  color: #6d6d6d;

  li {
    // width: 100%;
    padding: 10px 20px;
    text-align: center;
    // color: #007b7b;
    list-style: none;

    &:hover {
      // background-color: #ccc;
      cursor: pointer;
      color: orangered;
    }
  }
}
.free {
  width: 100%;
  height: 500px;
  box-shadow: 0 0 10px 0px #dbdada;
  margin-top: 20px;
  font-size: 50px;
  border-radius: 10px;
  background-color: #fff;
  color: #6d6d6d;
}

//基本资料 相关资料
.BasicInformation,
.EducationInformation,
.AccountSettings,
.PrivacySettings {
  border-radius: 10px;
  width: 100%;
  // height: 60px;
  // background-color: rgba(135, 206, 235, 0.2);
  margin-top: 20px;
  padding: 10px 0px;
  box-sizing: border-box;
  h4 {
    margin: 10px 20px;
  }
  hr {
    background-color: #fff;
  }
  ul {
    margin: 10px 20px;
    width: 100%;
    min-height: 450px;
    li {
      width: 100%;
      // height: 50px;
      margin: 10px 0px;
      min-height: 50px;
      .user_data {
        margin-top: 15px;
        margin-left: 20px;
        width: 120px;
        float: left;
      }
      .user_content {
        // position: absolute;
        margin-top: 15px;
        margin-left: 20px;
        width: 800px;
        // height: 30px;
        float: left;
        .ShowInfo {
          width: 600px;
          // height: 30px;
          float: left;
          .edit {
            margin-top: 8px;
            margin-left: 10px;
            font-size: 13px;
            display: none;
            opacity: 0.5;
            cursor: pointer;
            float: left;
          }
          &:hover {
            .edit {
              display: block;
              float: left;
            }
          }
        }

        p {
          float: left;
          // width: 200px;
        }
        .EditInfo {
          input {
            border-style: none;
            width: 200px;
            height: 30px;
            border-radius: 5px;
            padding-left: 10px;
            border: 1px solid #ccc;
            float: left;
            &:focus {
              outline: none !important;
              list-style: none;
            }
          }
          textarea {
            resize: none;
            width: 500px;
            height: 130px;
            list-style: none;
            border: 1px solid #ccc;
            padding: 5px;
            font-size: 16px;
            overflow: none;

            &:focus {
              outline: none !important;
              list-style: none;
            }
          }

          .SubmitInfo,
          .CancelInfo {
            text-align: center;
            float: left;
            margin-left: 30px;
            width: 50px;
            line-height: 25px;
            height: 25px;
            border-radius: 5px;
            margin-top: 5px;
            background-color: #fff;
            color: skyblue;
            border-color: #fff;
            cursor: pointer;
            &:hover {
              background-color: rgb(20, 104, 110);
              color: #fff;
            }
          }
          .prompt {
            margin-top: 5px;
            margin-left: 20px;
            color: #fc0a0a;
            float: left;
          }
          select {
            float: left;
            width: 200px;
            height: 30px;
            padding-left: 10px;
            border: 1px solid white;
            &:focus {
              outline: none !important;
            }
          }
        }
      }
    }
  }
}
</style>

